<template>
  <div class="app-container">
    <aside>
      <el-form ref="form" :model="form" class="search-form" inline label-width="80px">
        <el-form-item>
          <el-form-item class="mg-left-0">
            <el-input v-model="form.title" placeholder="产品主标题" />
          </el-form-item>
          <el-form-item class="mg-left-0">
            <el-input v-model="form.subtitle" placeholder="产品副标题" />
          </el-form-item>
          <el-select v-model="form.select">
            <el-option value="" label="全部">全部</el-option>
            <el-option value="0" label="未选择">未选择</el-option>
            <el-option value="1" label="已选择">已选择</el-option>
          </el-select>
          <el-form-item>
            <el-button type="primary" icon="el-icon-search" @click="getGoods">搜索</el-button>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" icon="el-icon-refresh" @click="downloadGoods">从天真蓝同步</el-button>
          </el-form-item>
        </el-form-item>
      </el-form>
    </aside>
    <el-container>
      <el-main class="pd-0">
        <el-table :data="goodsList.data" border stripe>
          <el-table-column prop="product_code" label="ID" />
          <el-table-column prop="title" label="标题" />
          <el-table-column prop="subtitle" label="副标题" />
          <el-table-column prop="min_price" label="最低价格" />
          <el-table-column prop="price" label="价格" />
          <el-table-column prop="discount_price" label="折扣" />
          <el-table-column label="封面图">
            <template slot-scope="{row}">
              <img v-if="row.main_img" :src="row.main_img" width="80">
            </template>
          </el-table-column>
          <el-table-column label="选择状态">
            <template slot-scope="{row}">
              <i v-if="row.select === 1" class="el-icon-check" style="color: #42b983;font-size: 30px;" />
            </template>
          </el-table-column>
          <el-table-column label="管理" width="200">
            <template slot-scope="{row, $index}">
              <el-button icon="el-icon-delete" type="info" size="mini" @click="delGoods(row.id)">删除</el-button>
              <el-button icon="el-icon-edit" type="primary" size="mini" @click="selectGoods($index)">选择</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-main>
      <el-footer>
        <my-page :data="goodsList" @change="page => { goodsList.current_page = page }" />
      </el-footer>
    </el-container>
  </div>
</template>

<script>
import orm from '@/api/orm'
import Goods from '@/api/goods'
import MyPage from '@/components/MyPage/index'
export default {
  name: 'Tzl' + new Date().getTime(),
  components: { MyPage },
  data() {
    return {
      form: {
        title: '',
        subtitle: '',
        hide: 0,
        select: ''
      },
      goodsList: {
        data: [],
        current_page: 0,
        per_page: 0,
        total: 0
      },
      goodsId: 0
    }
  },
  watch: {
    'goodsList.current_page'() {
      this.getGoods()
    }
  },
  created() {
    setTimeout(this.getGoods, 2000)
  },
  methods: {
    search() {
      this.goodsList.current_page = 0
    },
    getGoods() {
      const where = [['hide', '=', '0']]
      if (this.form.title) {
        where.push(['title', 'like', '%' + this.form.title + '%'])
      }

      if (this.form.subtitle) {
        where.push(['subtitle', 'like', '%' + this.form.subtitle + '%'])
      }

      if (this.form.select !== '') {
        where.push(['select', '=', this.form.select])
      }
      orm.list('GoodsTZL', where, this.goodsList.current_page).then(res => {
        this.goodsList = res.data
      }).catch(res => {})
    },
    delGoods(id) {
      this.$confirm('确定删除本产品吗').then(res => {
        orm.update('GoodsTZL', id, { hide: 1 }).then(res => {
          this.getGoods()
        })
      }).catch(res => {})
    },
    selectGoods(index) {
      const id = this.goodsList.data[index].id
      this.$confirm('确定选择本产品吗').then(res => {
        Goods.select_tzl_goods(id).then(res => {
          this.goodsList.data[index].select = 1
        })
      })
    },
    downloadGoods() {
      this.$confirm('确定从天真蓝同步产品吗').then(res => {
        const loading = this.$loading()
        Goods.tongbu_tzl_goods().then(res => {
          loading.close()
          this.getGoods()
        })
      })
    }
  }
}
</script>

<style scoped>

</style>
